<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus &amp; toolbars in Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, menu, Qt, toolbar, Qyoto, C#, learn Qyoto">
<meta name="description" content="In this part of the Qyoto C# programming tutorial, 
we will work with menus and toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars in Qyoto</h1>

<p>
In this part of the Qyoto C# programming tutorial, we will work with menus 
and toolbars. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A menubar is one of the most visible parts of the GUI application. It is a group 
of commands located in various menus. Menus group commands that we can use in an 
application. Toolbars provide a quick access to the most frequently used 
commands.
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program shows a simple
 * menu. It has one action, which
 * will terminate the program, when
 * selected. 
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QMainWindow 
{    
    public QyotoApp() 
    {
        WindowTitle = "Simple menu";

        InitUI();
        
        Resize(300, 200);
        Move(300, 300);
        Show();
    }

    private void InitUI() 
    {
        QAction quit = new QAction("&amp;Quit", this);

        QMenu file = MenuBar.AddMenu("&amp;File");
        file.AddAction(quit);
        
        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
We have a menubar, a menu and an action. In order to work with menus,
we must inherit from <b>QMainWindow</b> widget. 
</p>

<pre class="explanation">
QAction quit = new QAction("&amp;Quit", this);
</pre>

<p>
This code line creates a <code>QAction</code>. Each <b>QMenu</b> has one or more 
action objects. Note the ampersand (&amp;) character. It creates a shortcut for 
the item. Alt + Q. It also underlines the Q character. The shortcut is active, 
when the file menu is dropped down. 
</p>

<pre class="explanation">
QMenu file = MenuBar.AddMenu("&amp;File");
file.AddAction(quit);
</pre>

<p>
We create a <code>QMenu</code> object. The ampersand character creates a 
shortcut. Alt + F. The consecutive shortcuts Alt + F, Alt + Q terminate the 
application. 
</p>

<pre class="explanation">
Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
</pre>

<p>
When we select this option from the menu, the application terminates. 
</p>

<img src="/img/gui/sharpqyoto/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Creating a submenu</h2>

<p>
A submenu is a menu plugged into another menu object. The next example 
demonstrates this. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program creates a
 * submenu.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QMainWindow 
{    
    public QyotoApp() 
    {
        WindowTitle = "Submenu";

        InitUI();
        
        Resize(300, 200);
        Move(300, 300);
        Show();
    }

    private void InitUI() 
    {
        QAction quit = new QAction("&Quit", this);

        QMenu file = MenuBar.AddMenu("&amp;File");
        QMenu impm = new QMenu("Import");

        QAction seeds = new QAction("Import news feed...", this);
        QAction marks = new QAction("Import bookmarks...", this);
        QAction mail = new QAction("Import mail...", this);

        impm.AddAction(seeds);
        impm.AddAction(marks);
        impm.AddAction(mail);

        file.AddMenu(impm);
        file.AddAction(quit);

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In the example, we have three options in a submenu of a file menu. 
</p>

<pre class="explanation">
QMenu file = MenuBar.AddMenu("&File");
QMenu impm = new QMenu("Import");
</pre>

<p>
We have two <code>QMenu</code> objects. The file menu and the import menu. 
</p>

<pre class="explanation">
QAction seeds = new QAction("Import news feed...", this);
QAction marks = new QAction("Import bookmarks...", this);
QAction mail = new QAction("Import mail...", this);
</pre>

<p>
We create three action objects.  
</p>

<pre class="explanation">
impm.AddAction(seeds);
impm.AddAction(marks);
impm.AddAction(mail);
</pre>

<p>
We add the action objects into the import menu. 
</p>

<pre class="explanation">
file.AddMenu(impm);
</pre>

<p>
Finally, we add the import menu into the file menu. 
</p>

<img src="/img/gui/sharpqyoto/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Images, menus, separators</h2>

<p>
In the following example, we will further enhance our previous application. 
We will add icons to the menus, use shortcuts and a separator. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program shows image menu items, a shorcut
 * and a separator.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QMainWindow 
{    
    public QyotoApp() 
    {
        WindowTitle = "Image menu";

        InitUI();
        
        Resize(300, 200);
        Move(300, 300);
        Show();
    }

    private void InitUI() 
    {
        QIcon newpix = new QIcon("new.png");
        QIcon openpix = new QIcon("open.png");
        QIcon quitpix = new QIcon("quit.png");

        QAction newa = new QAction(newpix, "&amp;New", this);
        QAction open = new QAction(openpix, "&amp;Open", this);
        QAction quit = new QAction(quitpix, "&amp;Quit", this);
        quit.Shortcut = "CTRL+Q";

        QMenu file;
        file = MenuBar.AddMenu("&amp;File");
        file.AddAction(newa);
        file.AddAction(open);
        file.AddSeparator();
        file.AddAction(quit);

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In our example, we have one menu with three actions. Only the quit action will 
actually do something, if we select it. We also create a separator and a 
Ctrl + Q shortcut, which will terminate the application. 
</p>

<pre class="explanation">
QIcon newpix = new QIcon("new.png");
QIcon openpix = new QIcon("open.png");
QIcon quitpix = new QIcon("quit.png");
</pre>

<p>
These are png images, that we will use in the application. 
</p>

<pre class="explanation">
QAction newa = new QAction(newpix, "&amp;New", this);
QAction open = new QAction(openpix, "&amp;Open", this);
QAction quit = new QAction(quitpix, "&amp;Quit", this);
</pre>

<p>
Here we create three action objects. The first parameter is the 
<code>QIcon</code>.
</p>

<pre class="explanation">
quit.Shortcut = "CTRL+Q";
</pre>

<p>
This line creates a shortcut. By pressing this shortcut, we will run the quit 
action, which will quit the application. 
</p>

<pre class="explanation">
file.AddSeparator();
</pre>

<p>
We create a separator. The separator is a horizontal line, which enables us to 
group menu actions into some logical parts. 
</p>


<img src="/img/gui/sharpqyoto/imshsep.png" alt="Images, shortcut and a separator">
<div class="figure">Figure: Images, shortcut and a separator</div>



<h2>A toolbar</h2>

<p>
The <b>QToolBar</b> class provides a movable panel that contains a
set of controls, which provide a quick access to the application actions. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program creates a 
 * toolbar.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QMainWindow 
{    
    public QyotoApp() 
    {
        WindowTitle = "Toolbar";

        InitUI();
        
        Resize(300, 200);
        Move(300, 300);
        Show();
    }

    private void InitUI() 
    {
        QIcon newpi = new QIcon("new.png");
        QIcon openpi = new QIcon("open.png");
        QIcon quitpi = new QIcon("quit.png");

        QToolBar toolbar = AddToolBar("main toolbar");
        toolbar.AddAction(newpi, "New File");
        toolbar.AddAction(openpi, "Open File");
        toolbar.AddSeparator();
        QAction quit = toolbar.AddAction(quitpi,
            "Quit Application");

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
We create a toolbar with three action objects and one separator. 
</p>

<pre class="explanation">
QIcon newpi = new QIcon("new.png");
QIcon openpi = new QIcon("open.png");
QIcon quitpi = new QIcon("quit.png");
</pre>

<p>
Toolbar action objects will display these icons.
</p>

<pre class="explanation">
QToolBar toolbar = AddToolBar("main toolbar");
</pre>

<p>
The <code>AddToolBar()</code> method of the <code>QMainWindow</code> class 
creates a toolbar for the application. The text string gives a toolbar a name. 
This name is used to reference this toolbar, because there can be multiple 
toolbars in one application. If we right click on the window area, we can see a 
checkable option, which shows/hides the toolbar. 
</p>

<pre class="explanation">
toolbar.AddSeparator();
</pre>

<p>
We create a vertical separator.
</p>

<pre class="explanation">
Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));
</pre>

<p>
When we click on the quit action object, the application terminates. 
</p>


<img src="/img/gui/sharpqyoto/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<h2>Undo redo</h2>

<p>
The following example demonstrates, how we can deactivate toolbar buttons 
on the toolbar. It is a common practice in GUI programming. For example 
a save button. If we save all changes of our document to the disk,
the save button is deactivated in most text editors. This way the 
application indicates to the user, that all changes are already saved. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program disables/enables
 * toolbuttons on a toolbar.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QMainWindow 
{    
    int count = 0;
    QToolButton undoButton;
    QToolButton redoButton;
    
    public QyotoApp() 
    {
        WindowTitle = "Undo redo";

        InitUI();
        
        Resize(300, 200);
        Move(300, 300);
        Show();
    }

    private void InitUI() 
    {
        QIcon undoi = new QIcon("undo.png");
        QIcon redoi = new QIcon("redo.png");
        QIcon quitpi = new QIcon("quit.png");

        QToolBar toolbar = new QToolBar();
        undoButton = new QToolButton();
        redoButton = new QToolButton();

        QAction undoAction = new QAction(undoi, "Undo", undoButton);
        QAction redoAction = new QAction(redoi, "Redo", redoButton);

        undoButton.DefaultAction = undoAction;
        redoButton.DefaultAction = redoAction;
        
        toolbar.AddWidget(undoButton);
        toolbar.AddWidget(redoButton);
        toolbar.AddSeparator();

        QAction quit = toolbar.AddAction(quitpi, "Quit Application");
        
        undoButton.Triggered += Count;
        redoButton.Triggered += Count;
        
        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"));

        AddToolBar(toolbar);        
    }
    
    [Q_SLOT]
    void Count(QAction action) 
    {
        if ("Undo".Equals(action.Text)) 
        {
            count += -1;
        } 
        else 
        {
            count += 1;
        }

        if (count <= 0) 
        {
            undoButton.SetDisabled(true);
            redoButton.SetDisabled(false);
        }

        if (count >= 5) 
        {
            undoButton.SetDisabled(false);
            redoButton.SetDisabled(true);
        }
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In our example, we have three <code>QAction</code> objects and a separator. 
After several clicks on the undo or redo buttons, they become deactivated. 
Visually, the buttons are grayed out. 
</p>

<pre class="explanation">
int count = 0;
</pre>

<p>
The count variable determines, which button is activated and deactivated. 
</p>

<pre class="explanation">
undoButton.Triggered += Count;
redoButton.Triggered += Count;
</pre>

<p>
Clicking on the toolbar button, the <code>Triggered</code> signal is emitted.
We connect this signal to the <code>Count()</code> method. It receives the 
<code>QAction</code> object which has triggered it.
</p>


<pre class="explanation">
if ("Undo".Equals(action.Text)) 
{
    count += -1;
} 
else 
{
    count += 1;
}
</pre>

<p>
The undo toolbar button subtracts 1 from the count variable. The 
redo adds 1. Depending on the value of the count variable, we enable/disable
the toolbar buttons.
</p>

<pre class="explanation">
if (count <= 0) 
{
    undoButton.SetDisabled(true);
    redoButton.SetDisabled(false);
}
</pre>

<p>
The <code>SetDisabled()</code> method activates or deactivates the
toolbar buttons. 
</p>

<img src="/img/gui/sharpqyoto/undoredo.png" alt="Undo redo">
<div class="figure">Figure: Undo redo</div>

<p>
In this part of the Qyoto C# tutorial, we mentioned the menus and toolbars. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 1, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>
 
</div> <!-- content -->

</div> <!-- container -->

</body> 
</html>